<template>
  <div class="nav">
    <h1>网店订单</h1>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="订单编号">
        <el-input
            placeholder="品牌名称"
            v-model="searchParams.id"
        ></el-input>
      </el-form-item>
      <el-form-item label="订单类型">
        <el-select placeholder="请选择" v-model="searchParams.orderType">
          <el-option
              v-for="(key,value) in orderTypeList"
              :key="value"
              :label="key"
              :value="value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="支付方式">
        <el-select placeholder="请选择" v-model="searchParams.paymentMethodId">
          <el-option
              v-for="(key,value) in payTypeList"
              :key="key"
              :label="key"
              :value="value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="业务类型">
        <el-select placeholder="请选择" v-model="searchParams.businessType">
          <el-option
              v-for="(key,value) in businessTypeList"
              :key="value"
              :label="key"
              :value="value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="下单时间">
        <el-date-picker
            v-model="pickerOptions.startDate"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="pickerOptions"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            @change="chooseTime">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="订单动作">
        <el-select placeholder="请选择" v-model="searchParams.orderAction">
          <el-option
              v-for="(key,value) in orderActionlist"
              :key="value"
              :label="key"
              :value="value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="订单状态">
        <el-select placeholder="" v-model="searchParams.orderStatus">
          <el-option
              v-for="(key,value) in orderStatusList"
              :key="value"
              :label="key"
              :value="value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="this.pageFind">查询</el-button>
        <el-button type="warning" @click="resetForm">重置</el-button>
        <el-button type="info" @click="selectBy">批量导出</el-button>
        <el-button type="info"  icon="el-icon-goods" @click="addOrder">添加商品</el-button>
        <!--        <el-button type="info" @click="out">批量生成出库单</el-button>-->
      </el-form-item>
    </el-form>
    <template>
      <el-table
          :data="this.orderList"
          style="width: 100%"
          ref="multipleTable"
          @selection-change="handleSelectionChange"
          stripe>
        >
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            prop="id"
            label="订单编号"
            width="180">
        </el-table-column>
        <el-table-column
            prop="orderType"
            label="订单类型"
            width="180">
        </el-table-column>
        <el-table-column
            prop="orderAction"
            label="订单动作"
            width="180">
        </el-table-column>
        <el-table-column
            prop="businessType"
            label="业务类型">
        </el-table-column>
        <el-table-column
            prop="deliveryStyle"
            label="配送方式">
        </el-table-column>
        <el-table-column
            prop="paymentMethodId"
            label="支付方式">
        </el-table-column>
        <el-table-column prop="orderStatus" label="订单状态">

        </el-table-column>
        <el-table-column
            label="操作">
          <template v-slot="obj">
            <el-button
                type="primary"
                icon="el-icon-view"
                round
                @click="dialogFormVisible=true, findOrderById(obj.row)">查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <div class="block">
      <el-pagination
          background
          layout="prev, pager, next"
          :total=total
          :current-page="this.searchParams.currentPage"
          :page-size="this.searchParams.pageSize"
          @current-change="currentPageChange"
          align="right">
      </el-pagination>
    </div>

    <!-- 弹框dialog-->
    <div class="dialog-box">
      <el-dialog title="销售订单详情" :visible.sync="dialogFormVisible" width="60%">
        <h4>订单基本资料</h4>
        <el-form :model="formData" :inline="true" label-width="80px">
          <el-form-item label="订单编号" size="mini">
            <el-col :span="30">
              <el-input autocomplete="off" v-model="formData.id" :disabled="true"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="下单日期" size="mini">
            <el-col :span="30">
              <el-input autocomplete="off" v-model="formData.orderDate" :disabled="true"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="订单类型" size="mini">
            <el-col :span="30">
              <el-input autocomplete="off" v-model="formData.orderType" :disabled="true"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="支付方式" size="mini">
            <el-col :span="30">
              <el-input autocomplete="off" v-model="formData.paymentMethodId" :disabled="true"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="业务类型" size="mini">
            <el-col :span="30">
              <el-input autocomplete="off" v-model="formData.businessType" :disabled="true"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="订单动作" size="mini">
            <el-col :span="30">
              <el-input autocomplete="off" v-model="formData.orderAction" :disabled="true"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="订单状态" size="mini">
            <el-col :span="30">
              <el-input autocomplete="off" v-model="formData.orderStatus" :disabled="true"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="配送方式" size="mini">
            <el-col :span="30">
              <el-input autocomplete="off" v-model="formData.deliveryStyle" :disabled="true"></el-input>
            </el-col>
          </el-form-item>

          <el-form-item label="配送费用" size="mini">
            <el-col :span="30">
              <el-input autocomplete="off" v-model="formData.deliveryCost" :disabled="true"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="配送地区" size="mini">
            <el-col :span="30">
              <el-input autocomplete="off" v-model="formData.deliveryArea" :disabled="true"></el-input>
            </el-col>
          </el-form-item>
        </el-form>
        <div>
          <h3>订单商品信息</h3>
          <el-table
              style="width: 100%"
              ref="multipleTable"
              :data="goodList"
          >
            <el-table-column
                prop="goodsId"
                label="商品编号"
                width="180">
            </el-table-column>
            <el-table-column
                prop="orderProductName"
                label="商品名称"
                width="180">
            </el-table-column>
            <el-table-column
                prop="orderProductPrice"
                label="单价"
                width="180">
            </el-table-column>
            <el-table-column
                prop="orderProductNumber"
                label="数量"
                width="180">
            </el-table-column>
            <el-table-column
                prop="orderProductMoney"
                label="总金额"
                width="180">
            </el-table-column>
          </el-table>
        </div>
        <div>
          <el-form :model="receiverInfo" :inline="true" label-width="80px">
            <h4>收货人资料</h4>
            <el-form-item label="收货人姓名" size="mini">
              <el-col :span="30">
                <el-input autocomplete="off" v-model="receiverInfo.receiverName" :disabled="true"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="会员账号" size="mini">
              <el-col :span="30">
                <el-input autocomplete="off" v-model="receiverInfo.vipId" :disabled="true"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="自提时间" size="mini">
              <el-col :span="30">
                <el-input autocomplete="off" v-model="receiverInfo.selfMentiontime" :disabled="true"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="联系电话" size="mini">
              <el-col :span="30">
                <el-input autocomplete="off" v-model="receiverInfo.receiverTelephone" :disabled="true"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="联系手机" size="mini">
              <el-col :span="30">
                <el-input autocomplete="off" v-model="receiverInfo.receiverPhone" :disabled="true"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="邮政编码" size="mini">
              <el-col :span="30">
                <el-input autocomplete="off" v-model="receiverInfo.postalCode " :disabled="true"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="收货地址" size="mini">
              <el-col :span="30">
                <el-input autocomplete="off" v-model="receiverInfo.receiverAdress" :disabled="true"></el-input>
              </el-col>
            </el-form-item>

            <el-form-item label="电子邮箱" size="mini">
              <el-col :span="30">
                <el-input autocomplete="off" v-model="receiverInfo.receiverEmail" :disabled="true"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="汇款人" size="mini">
              <el-col :span="30">
                <el-input autocomplete="off" v-model="receiverInfo.payName" :disabled="true"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="备注" size="mini">
              <el-col :span="30">
                <el-input autocomplete="off" v-model="receiverInfo.receiverNotation" :disabled="true"></el-input>
              </el-col>
            </el-form-item>
          </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false" size="mini">返回</el-button>
          <el-button type="primary" @click="dialogFormVisible = false" size="mini">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import index from "./index"

export default index
</script>


<style lang="scss">

@import "index.css";

</style>